<script setup lang="ts">
import { defineComponent, ref, reactive, watch, watchEffect, computed, toRef, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router';
import refOrReactive from "./components/refOrReactive.vue";


const router = useRouter()
const route = useRoute()

// const toFanXing = function(){
// router.push({
//     path: '/fanXing',
//     query: { id: '带个ID参数' }
//   })
// }

const toURL = function (path: string, query?: { [key: string]: string }) {
  router.push({ path, query })
}

//route 对象是一个响应式对象，所以它的任何属性都可以被监听
watch(
  () => route.path,//路由地址变化
  (newValue, oldValue) => {
    // console.log(newValue, oldValue)

    //获取路由参数(感觉不规范)
    // console.log(route.query.id)
  }
)
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/TS', { id: '带个ID参数' })">跳转TS理解</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/refOrReactive')">refOrReactive</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/piniaTest')">piniaTest</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/mockTest')">mockTest</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/computedOrwatch')">computedOrwatch</el-button></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/father')">父子组件通讯</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/toDoListDemo')">锻炼todolist</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/slot')">slot</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/toVue2')">vue2写法</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/chatRoom11')">chatRoom</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/webSocket')">webSocket</el-button></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/memoryLeak')">内存泄漏</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/draggable')">draggable(拖拽)</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /><el-button type="success" @click="toURL('/filter')">filter</el-button></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  
  <el-divider />
  <!-- <div>{{'watch和watchEffect用法'}}</div>
  <div>{{'computed用法'}}</div>
  <div>{{'toRef,toRefs'}}</div> -->
  <el-divider />
  <!-- <router-link :to="'/refOrReactive'">9999</router-link> -->

  <router-view></router-view>
  <!-- <div class="common-layout">
    <el-container>
      <el-header>
       <img src="./assets/image/download.png" alt="">
      </el-header>
      <el-container>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div> -->
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
  background-color: red;
}

.el-main {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

deep .el-header {
  padding: auto;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
}
</style>
